<template>
  <div class="contentRight2">
    <!--访客单位访问统计-->
    <div id="tools">

      <div class="height8"></div>
      <!-- 查询条件 -->
      <a-form layout="inline" style="text-align: left;padding: 0 10px;font-size: 0;" :selfUpdate="true">

        <a-form-item label="查询方式" class="marginBtm">
          <a-dropdown class="min-width-110">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item :key="item.id" v-for="item in approvalStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>
              <div class="query-conditions">
                {{ statusValue }}
                <a-icon type="down"/>
              </div>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <a-form-item label="选择月份" class="marginBtm" v-if="statusId == 1" :hasFeedback="monthFeedback" :validateStatus="validateStatus">
        <a-config-provider :locale="localezh_CN">
        <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
          <a-month-picker :size="'default'" placeholder="请选择月份" style="width: 150px;" :value="nowMonthDate"  @change="onChangeDate"/>
        </a-config-provider>
        </a-form-item>
        <div style="display: inline-block;" v-if="statusId == 2">
          <a-form-item label="选择年份" class="marginBtm" :hasFeedback="yearFeedback" :validateStatus="validateStatus2">
            <a-config-provider :locale="localezh_CN">
              <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
              <a-date-picker mode="year" placeholder="请选择年份"  style="width: 150px;" :value="yearTime" :open="isopen"  format="YYYY"
                             @openChange=handleOpenChange
                             @panelChange=handlePanelChange
                             @change=clearValue />
            </a-config-provider>
          </a-form-item>
        <a-form-item label="选择季度" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="quarterlyMenuClick">
              <a-menu-item :key="item.id" v-for="item in quarterlyStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ quarterlyValue }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>
        </div>
        <a-form-item label="选择年份" class="marginBtm" v-if="statusId == 3" :hasFeedback="yearFeedback" :validateStatus="validateStatus2">
          <a-config-provider :locale="localezh_CN">
            <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
            <a-date-picker mode="year" placeholder="请选择年份"  style="width: 150px;" :value="yearTime" :open="isopen"  format="YYYY"
                           @openChange=handleOpenChange
                           @panelChange=handlePanelChange
                           @change=clearValue />
          </a-config-provider>
        </a-form-item>

        <a-form-item label="基地" class="marginBtm">
          <a-dropdown class="min-width-110">
            <a-menu slot="overlay" @click="baseMenuClick">
              <a-menu-item :key="item.id" v-for="item in baceType">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>
              <div class="query-conditions">
                {{ visitBaseName }}
                <a-icon type="down"/>
              </div>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <!--<a-form-item label="被访者部门" class="marginBtm">-->
        <!--<a-dropdown style="">-->
        <!--<a-menu slot="overlay" @click="areaMenuClick">-->
        <!--<a-menu-item :key="item.id" v-for="item in areaList">{{item.areaName}}</a-menu-item>-->
        <!--</a-menu>-->
        <!--<a-button>{{ areaName }}-->
        <!--<a-icon type="down"/>-->
        <!--</a-button>-->
        <!--</a-dropdown>-->
        <!--</a-form-item>-->

        <a-form-item label="Top" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="topMenuClick">
              <a-menu-item :key="item.id" v-for="item in topStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ topValue }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <!--<a-form-item label="关键字" class="marginBtm">-->
          <!--<a-input v-model="queryValue" allowClear placeholder="请输入姓名/手机号" class="marginBtm"-->
                   <!--@pressEnter="inquireStart"/>-->
        <!--</a-form-item>-->

        <a-form-item class="marginBtm">
          <a-button type="primary" @click="inquireStart">
            查询
          </a-button>
        </a-form-item>

      </a-form>
      <a-divider style="margin: 5px 0"/>

    </div>

    <div :style="{height:yHeight,position: 'relative'}">
      <!--柱状图-->
      <!--自定义加载中-->
      <div class="zhezhaoAllBase" style="top:0" v-if="loadingAll">
        <a-spin tip="加载中...">
        </a-spin>
      </div>
      <div class="zhezhaoAllBase" style="top:0" v-else-if="errorMessageAll != ''">
        <p>{{errorMessageAll}}</p>
      </div>
      <div class="zhezhaoAllBase" style="top:0" v-else-if="dataAll2.length == 0">
        <p>未查询到匹配数据</p>
      </div>

      <!--柱状图-->
      <div style="padding: 40px 40px 0 40px">
        <div id="containerAll2" class="chartzhu4"></div>
      </div>

    </div>

  </div>
</template>

<script>
  import {tableBoxHeight} from "@/api/communal";
  import reservationApi from "@/api/reservation";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import dateUtil from "@/utils/dateUtils";
  import moment from "moment";
  import {ConfigProvider} from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';
  import cfg from '@/config/config'
  import { registerTheme,Chart } from '@antv/g2';
  registerTheme('newTheme', {minColumnWidth:10,maxColumnWidth:10});

  export default {
    components: {
      ConfigProvider
    },
    name: '',
    data() {
      return {
        localezh_CN,
        spinning: false,
        delayTime: 500,
        yHeight: "",
        yHeight3: 400,
        loadingAll: true,  //加载中
        nowMonthDate: moment(new Date(), 'YYYY-MM'),
        yearTime: moment(moment().year(), 'YYYY'),
        isopen: false,
        yearFeedback: false,  //警示图标是否展示图标
        validateStatus2: '',//图标类型
        dateFormat: 'YYYY/MM/DD',
        startDate: "",
        endDate: "",
        startDated: "",
        endDated: "",
        queryValue: "",  //查询值,访客名称，访客手机号
        columns: [],   //表格表头
        // 查询方式下拉菜单
        statusValue: "按月",  //状态名称
        statusId: 1,   //状态id
        approvalStatus: [
          {name: "按月", id: 1},
          {name: "按季度", id: 2},
          {name: "按年", id: 3},
        ],
        monthFeedback: false,  //警示图标是否展示图标
        validateStatus: '',//图标类型
        // 选择季度下拉菜单
        quarterlyValue: "第一季度",  //状态名称
        quarterlyId: 1,   //状态id
        quarterlyStatus: [
          {name: "第一季度", id: 1},
          {name: "第二季度", id: 2},
          {name: "第三季度", id: 3},
          {name: "第四季度", id: 4},
        ],
        // top下拉菜单
        topValue: "30",  //状态名称
        topId: 2,   //topid
        topStatus: [
          {name: "20", id: 1},
          {name: "30", id: 2},
        ],
        //基地列表
        baceType: [
          {name: "全部", id: 99},
        ],
        visitBaseName:"全部",   //基地名称
        visitBaseId: 99,   //99查全部，或者基地id
        //区域列表
        areaList: [
          {areaName: "全部", id: 99},
        ],
        areaName:"全部",    //区域名称
        visitAreaId: 99,   //99查全部，或者区域id
        // 柱状图
        dataAll2 : [],   // 柱状图数据
        chartAll2: null,  //总数据图形对象
        errorMessageAll:"",//错误信息

      }
    },
    beforeMount() {
      // this.dataAll2 = [
      //   {
      //     name: '上海步达110',
      //     value: 100,
      //   },
      //   {
      //     name: '上海步达19',
      //     value: 90,
      //   },
      // ];
      // this.startDate = moment(dateUtil.getFirstDay(), this.dateFormat);
      // this.endDate = moment(dateUtil.getLastDay(), this.dateFormat);
      // this.startDated = moment(this.startDate).format('YYYY-MM-DD');
      // this.endDated = moment(this.endDate).format('YYYY-MM-DD');
    },
    mounted() {
      let _this = this;
      // console.log(tableBoxHeight());
      this.yHeight = tableBoxHeight() + 93 + "px";
      this.yHeight3 = tableBoxHeight() + 23;
      this.statusValue = this.approvalStatus[0].name;
      this.statusId = this.approvalStatus[0].id;

      // 获取基地
      this.findRegionList();
      this.fristLoadData()

    },
    destroyed(){
      // 在页面销毁后
    },
    methods: {
      // 计算表格宽度
      getTableWidth() {
        let totals = null;
        var el;
        for (el of this.columns) {
          totals += parseInt(el.width);
        }
        return totals + 100 + "px"
      },
      // 选择日期
      onChangePicker(date, dateString) {
        // console.log(date, dateString);
        this.startDated = dateString[0];
        this.endDated = dateString[1];
      },
      onChangeDate(date, dateString) {
        // console.log(date, dateString);
        this.nowMonthDate = date;
        if (this.nowMonthDate == null){
          this.monthFeedback = true;
          this.validateStatus = 'error';
        } else {
          this.monthFeedback = false;
          this.validateStatus = '';
        }
      },

      handlePanelChange (value){
        this.yearTime = value;
        this.yearFeedback = false;
        this.validateStatus2 = '';
        this.isopen = false;
      },
      handleOpenChange (status)  {
        if(status){
          this.isopen = true;
        } else {
          this.isopen = false;
        }
      },
      clearValue () {
        this.yearTime = null;
        this.yearFeedback = true;
        this.validateStatus2 = 'error';
      },
      // 第一次加载数据
      async fristLoadData(){
        // 第一次默认按月查询
        let param = {
          statusId: this.statusId,
          month: moment(this.nowMonthDate).format('YYYY-MM'),    //月份
          visitBaseId: this.visitBaseId,   //基地id
          topValue: this.topValue,   //top数
        }
        // console.log(param);
        await this.getAllVisitCases(param);
        this.piechartAll2();
      },

      // 开始查询
      async inquireStart() {
        if (this.statusId == 1){
          if (this.nowMonthDate == null){
            this.$message.error("请选择月份");
            return
          }
          let param = {
              statusId: this.statusId,   //按什么查询
              month: moment(this.nowMonthDate).format('YYYY-MM'),    //月份
              visitBaseId: this.visitBaseId,   //基地id
              topValue: this.topValue,   //top数
            }
          await  this.getAllVisitCases(param);
        } else if (this.statusId == 2){
          if (this.yearTime == null){
            this.$message.error("请选择年份");
            return
          }
          let param2 = {
            year: moment(this.yearTime).format('YYYY'),
            statusId: this.statusId,
            quarterlyId: this.quarterlyId,    //季度id
            visitBaseId: this.visitBaseId,   //基地id
            topValue: this.topValue,   //top数
          }
          await  this.getAllVisitCases(param2);
        } else if (this.statusId == 3){
          if (this.yearTime == null){
            this.$message.error("请选择年份");
            return
          }
          let param3 = {
            statusId: this.statusId,
            year: moment(this.yearTime).format('YYYY'),    //年份
            visitBaseId: this.visitBaseId,   //基地id
            topValue: this.topValue,   //top数
          }
          await  this.getAllVisitCases(param3);
        }
        this.$nextTick(()=>{
          // console.log("更新柱状图")
          this.chartAll2.data(this.dataAll2);
          this.chartAll2.render();
        })
      },
      // 查询方式下拉菜单
      handleMenuClick(e) {
        // console.log(e);
        this.approvalStatus.filter(el => {
          if (el.id == e.key) {
            this.statusValue = el.name;
            this.statusId = el.id
          }
        });
      },

      // top下拉菜单
      topMenuClick(e) {
        // console.log(e);
        this.topStatus.filter(el => {
          if (el.id == e.key) {
            this.topValue = el.name;
            this.topId = el.id
          }
        });
      },
      // 季度选择下拉菜单
      quarterlyMenuClick(e) {
        // console.log(e);
        this.quarterlyStatus.filter(el => {
          if (el.id == e.key) {
            this.quarterlyValue = el.name;
            this.quarterlyId = el.id
          }
        });
      },
      // 切换基地
      baseMenuClick(e) {
        // console.log(e);
        this.baceType.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.visitBaseName = el.name;
            this.visitBaseId = el.id;
            if (el.id == 99){
              this.areaName = "全部";
              this.visitAreaId = 99
            } else {
              this.getAntingAreaList();
            }
          }
        });

      },
      // 切换区域
      areaMenuClick(e) {
        // console.log(e);
        this.areaList.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.areaName = el.areaName;
            this.visitAreaId = el.id
          }
        });

      },

      // 获取基地信息
      async findRegionList() {
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        // console.log(resp);
        if (resp.data.success){
          this.baceType = [...this.baceType,...resp.data.result];
          // console.log(this.baceType)
        } else {
          this.$message.error(resp.data.message);
        }
      },
      // 获取区域--改为获取部门
      async getAntingAreaList(){
        let res = await reservationApi.getVisitorTypeAreaList({typeId: this.visitBaseId})
        // console.log(res.data);
        if (res.data.success){
          this.areaList = [{areaName: "全部", id: 99}];
          this.areaList = [...this.areaList,...res.data.result];
          // console.log(this.areaList)
        } else {
          this.$message.error(res.data.message);
        }

      },

      // 获取数据
      async getAllVisitCases(params) {
        this.loadingAll = true;
        let resp = await reservationApi.getVisitorUnitList(params);
        // console.log(resp.data);
        if (resp.data.success) {
          this.dataAll2 = resp.data.result;
          this.loadingAll = false;
          this.errorMessageAll = '';
        } else {
          this.loadingAll = false;
          this.errorMessageAll = resp.data.message;
        }
      },

      // 全部基地访客数据柱状图
      piechartAll2() {
        const chart = new Chart({
          container: 'containerAll2',
          autoFit: true,
          height: this.yHeight3,
          padding: [20, 30, 100, 30],
        });
        this.chartAll2 = chart;
        chart.data(this.dataAll2);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('name', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        chart.tooltip({
          showMarkers: false,
        });
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('name*value')
          .color('name', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        chart.render();
      },


    },
  }
</script>

<style scoped>

</style>

